<template>
     <van-cell class="article-item"
     :to="{name:'article',params:{
        articleId:content.art_id
       }
      }"
     >
      <template #title>
        <span class="title van-multi-ellipsis--l3">{{content.title}}</span>
      </template>
      <template #label>
        <div class="cover-wrap"  v-if="content.cover.type===3">
            <van-image
              fit="cover"
              class="cover-item"
              v-for="(img,index) in content.cover.images"
              :key="index"
              :src="img"
            />
        </div>
        <div class="label-wrap">
          <span>{{content.aut_name}}</span>
          <span>{{content.comm_count}}</span>
          <span>{{content.pubdate |relativeTime}}</span>
        </div>
      </template>
      <template #default  v-if="content.cover.type===1">
        <van-image
          class="right-cover"
          fit="cover"
          :src="content.cover.images[0]"
        />
      </template>
     </van-cell>
</template>
<script>
export default {
  name: 'ArticleItem',
  props: {
    content: {
      type: Object,
      require: true
    }
  },
  data () {
    return {}
  }
}
</script>
<style lang="less" scoped>
.article-item{
 .title{
   font-size: 16px;
   color: #3a3a3a;
 }
 /deep/.van-cell__value{
   width: 116px;
   height: 73px;
   flex: unset;
   margin-left: 12px;
 }
 /deep/.van-cell__title{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 }
 .right-cover{
   width: 116px;
   height: 73px;
 }
 .cover-wrap{
    display: flex;
    padding: 15px 0;
   .cover-item{
    flex: 1;
    height: 73px;
    width: 100%;
    &:not(:last-child){
      padding-right: 4px;
    }
   }
 }
 .label-wrap{
   font-size: 11px;
   color: #b4b4b4;
 }
 .label-wrap span{
   margin-right: 12px;
 }
}
</style>
